<template>
    <!-- 搜索框 -->
    <view 
        class="search-input" 
        :style="'background:' + background"
        :class="{ 'search-icon': showSearchIcon }"
    >
        <input v-model="value" :placeholder="placeholder" placeholder-class="placeholder-style" @confirm="clickSearch" @input="inputChange" />
        <view class="search-btn" @click="clickSearch">搜索</view>
    </view>
</template>

<script>
    export default {
        props: {
            placeholder: {
                type: String,
                default: ''
            },
            background: {
                type: String,
                default: '#fff'
            },
            showSearchIcon: {
                type: Boolean,
                default: true
            },
            modelValue: {
                type: String,
                default: ''
            },
            source: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                value: ''
            }
        },
        watch: {
            modelValue(){
                this.value = this.modelValue
            }
        },
        mounted() {
            this.value = this.modelValue
        },
        methods: {
            inputChange(){
                this.$emit('updateValue', this.value)
                if(!this.value && this.source != 'home'){
					this.clickSearch()
				}
            },
            clickSearch(){
                this.$emit('search')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .search-input{
        margin: 0 24rpx;
        background: #fff;
        height: 72rpx;
        border-radius: 36rpx;
        padding: 0 8rpx 0 20rpx;
        display: flex;
        align-items: center;

        &.search-icon::before{
            content: '';
            display: inline-block;
            width: 40rpx;
            height: 40rpx;
            background: url('../static/search-icon.png') center no-repeat;
            background-size: 40rpx;
        }

        input{
            flex: 1;
            height: 72rpx;
            border: none;
            padding: 0 20rpx;
        }

        .placeholder-style{
            color: rgba(0,0,0,0.25);
        }

        .search-btn{
            width: 104rpx;
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
            border-radius: 28rpx;
            color: #fff;
            background: #59E1CE;
            font-size: 24rpx;
        }
    }
</style>